{extend name="main"}
{block name="style"}
<style type="text/css">
	.w-100px{width: 100px;}
	.w-200px{width: 200px;}
	#container{line-height: 1;width: 800px;}
	pre{overflow: visible;}
</style>
{/block}
{block name="body"}
<div class="bg-white p-3">
	<div class="table-responsive">
		<el-form :model="form" @submit.native.prevent="submitForm" :rules="rules" ref="form" label-width="120px" :label-position="labelPosition">

		  <el-form-item label="接收人群" prop="crowd">
		    <el-radio-group v-model="form.crowd">
		      <el-radio :label="'all'">所有人</el-radio>
		      <el-radio :label="'appoint'">指定用户</el-radio>
		      <el-radio :label="'company'">企业用户</el-radio>
		      <el-radio :label="'personal'">个人用户</el-radio>
		      <el-radio :label="'mp'">关注公众号用户</el-radio>
		      <el-radio :label="'mobile'">绑定手机号用户</el-radio>
		      <el-radio :label="'email'">绑定邮箱用户</el-radio>
		    </el-radio-group>
		  </el-form-item>

		  <el-form-item label="用户搜索类型" prop="search_type" v-if="form.crowd==='appoint'">
		    <el-radio-group v-model="search.search_type" @change="search.key='';">
		      <el-radio :label="'uid'">UID</el-radio>
		      <el-radio :label="'company_name'">公司名</el-radio>
		      <el-radio :label="'resume_name'">简历名</el-radio>
		      <el-radio :label="'mobile'">手机号</el-radio>
		      <el-radio :label="'email'">邮箱</el-radio>
		    </el-radio-group>
		  </el-form-item>

		  <el-form-item :label="getSearchType()" prop="key" v-if="form.crowd==='appoint'">
		    <el-autocomplete v-model="search.key"
			  :fetch-suggestions="querySearchAsync"
			  @select="handleSelect" style="width: 400px;"></el-autocomplete>
		  </el-form-item>

		  <el-form-item label="已选用户" prop="user_list" v-if="form.crowd==='appoint'">
		  	<el-tag
			  	v-for="v in user_list"
			  	:key="v"
			  	closable
  				@close="handleClose(v)"
  				class="mr-2">
			  	{{v.value}}
			</el-tag>
		  </el-form-item>

		  <el-form-item label="客户端" prop="client">
		    <el-checkbox-group v-model="form.client">
		      <el-checkbox :label="'Pc'">Pc</el-checkbox>
		      <el-checkbox :label="'App'">APP</el-checkbox>
		      <el-checkbox :label="'Sms'">短信</el-checkbox>
		      <el-checkbox :label="'Email'">邮件</el-checkbox>
		      <el-checkbox :label="'Mp'">微信公众号</el-checkbox>
		      <el-checkbox :label="'Miniprogram'">微信小程序</el-checkbox>
		    </el-checkbox-group>
		    <div class="small text-secondary">不选为所有端</div>
		  </el-form-item>

		  <el-form-item label="标题" prop="title">
		    <el-input v-model="form.title" class="col-12 col-sm-3 pl-0 pr-0" placeholder="Title" maxlength="50" show-word-limit></el-input>
		  </el-form-item>

		  <el-form-item label="描述" prop="desc">
			<el-input
			  type="textarea"
			  :autosize="{ minRows: 4, maxRows: 6}"
			  placeholder="请输入内容"
			  v-model="form.desc"
			  class="col-12 col-sm-3 px-0">
			</el-input>
		  </el-form-item>

		  <el-form-item label="内容" class="line-height-inherit" prop="content">
			<script id="container" type="text/plain"></script>
		  </el-form-item>

		  <el-form-item>
		    <el-button type="primary" @click="submitForm('form')">立即保存</el-button>
		    <el-button @click="resetForm('form')">重置</el-button>
		  </el-form-item>
		</el-form>
	</div>
</div>
{/block}
{block name="script"}
{js href="/static/plugin/Ueditor/ueditor.config.js" /}
{js href="/static/plugin/Ueditor/ueditor.all.min.js" /}
{js href="/static/plugin/Ueditor/lang/zh-cn/zh-cn.js" /}
<script type="text/javascript">
	var ue = UE.getEditor('container');
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			labelPosition:'right',
			user_list:[],
			form:{
				crowd:'all',
				user_list:[],
				client:['Pc','App','Sms','Email','Mp','Miniprogram'],
				title:'',
				desc:'',
				content:'',
			},
			search:{
				search_type:'uid',
				key:'',
				ajax:false,
			},
	        rules: {
	          crowd: [
	            { required: true, message: '请选择接收人群', trigger: 'blur' },
	          ],
	          title: [
	            { required: true, message: '请输入名称', trigger: 'blur' },
	          ],
	          content: [
	            { required: true, message: '请输入消息内容', trigger: 'blur' },
	          ],
	        }
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
		},
		methods:{
		    handleClose(tag) {
		    	var index=this.user_list.indexOf(tag);
		        this.user_list.splice(index, 1);
		        this.form.user_list.splice(index, 1);
		    },
	    	getSearchType(){
	    		var text='UID';
	    		switch(this.search.search_type){
	    			case 'uid':
	    				text='UID';
	    				break;
	    			case 'company_name':
	    				text='公司名';
	    				break;
	    			case 'resume_name':
	    				text='简历名';
	    				break;
	    			case 'mobile':
	    				text='手机号';
	    				break;
	    			case 'email':
	    				text='邮箱';
	    				break;
	    		}
	    		return text;
	    	},
		    querySearchAsync(queryString, cb) {
		    	if (this.search.ajax || !queryString)return;
		    	$.getJSON('/user/searchUser',this.search,function(ret){
		    		if (ret) {
		    			if (ret.code === 0) {
		    				cb(ret.data);
		    			}else{
		    				XYBase.msg(ret.msg);
		    			}
		    		}
		    	});
		    },
		    handleSelect(item) {
		    	var index=this.form.user_list.indexOf(item.uid);
		    	if (index>=0) return XYBase.msg('该用户已在选中列表');
		    	if (this.user_list.length>=100) return XYBase.msg('最大可选择100个用户');
		    	this.user_list.push(item);
		    	this.form.user_list.push(item.uid);
		    },
			submitForm:function(formName) {
				var _this=this;
				var D=_this.form;
				    D.content=ue.getContent();
				_this.$refs[formName].validate((valid) => {
				  if (valid) {
					const loading = XYBase.openloading();
					$.ajax({
						url:'/message/send',
						data:D,
						type:'post',
						dataType:'json',
						success:function(ret){
					        loading.close();
					        if (ret) {
								if(ret.code == 0){
									XYBase.success(ret.msg);
									_this.user_list=[];
									_this.resetForm(formName);
									ue.execCommand('cleardoc');
									ue.execCommand('clearlocaldata');
								}else{
									XYBase.msg(ret.msg);
								}
					        }else{
				          		XYBase.error(XYBase.config.system_network_error)
					        }
						},
						error:function(err){
					        loading.close();
				          	XYBase.error(XYBase.config.system_network_error)
						}
					});
				  } else {
					XYBase.warning('请先把表单填写完整。');
				    return false;
				  }
				});
			},
			resetForm:function(formName) {
				this.$refs[formName].resetFields();
			},
		}
	});
$(function(){
	reloadWindowSize();
	$(window).resize(function(){
		reloadWindowSize();
	});
});
function reloadWindowSize (argument) {
	var winW=$(window).width();
	if(winW <= 576){
		vm.labelPosition='top';
	}else{
		vm.labelPosition='right';
	}
}
</script>
{/block}